import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import printStyles from './index.less';
import 'antd/dist/antd.css';

const getValue = obj =>
  Object.keys(obj)
    .map(key => obj[key])
    .join(',');

export default class Print extends React.Component {
  static propTypes = {
    printModel: PropTypes.object, //数据模型model，对应后台的model
  };

  static defaultProps = {
    printModel: null,
  };

  constructor(props) {
    super(props);
    this.state = {};
  }

  componentWillUnmount() {}

  render() {
    const printModel = this.props.printModel;
    const orderDetailVos = this.props.printModel ? this.props.printModel.orderDetailVos : [];
    let orderAddress = printModel.orderAddress;
    if (orderAddress === undefined || orderAddress === null) {
      orderAddress = {
        receiveName: '',
        receiveTel: '',
        receiveProvinceName: '',
        receiveCountyName: '',
        receiveAddress: '',
        provinceCode: '',
        cityCode: '',
        areaCode: '',
        expressCode: '',
        expressNumber: '',
        expressName: '',
        officialWebsite: '',
        icon: '',
      };
    }

    return (
      <div>
        <p className={printStyles.divStyle}>杂志订阅单</p>
        <div className={printStyles.rowStyle}>
          <div className={printStyles.firstStyle}>订单号:</div>
          <div>{printModel.orderNo}</div>
        </div>
        <div className={printStyles.rowStyle}>
          <div className={printStyles.firstStyle}>收件人:</div>
          <div>{orderAddress.receiveName}</div>
        </div>
        <div className={printStyles.rowStyle}>
          <div className={printStyles.firstStyle}>收件地址:</div>
          <div>
            {orderAddress.receiveProvinceName}
            {orderAddress.receiveCityName}
            {orderAddress.receiveCountyName}
            {orderAddress.receiveAddress}
          </div>
        </div>
        <div className={printStyles.rowStyle}>
          <div className={printStyles.firstStyle}>联系方式:</div>
          <div>{orderAddress.receiveTel}</div>
        </div>
        <table
          id="pactPrintTable"
          style={{ width: '98%', marginLeft: '10px', marginRight: '10px', marginTop: '20px' }}
          cellPadding="2"
          cellSpacing="2"
          border="1"
        >
          <tr>
            <td style={{ height: '45px', width: '20%' }}>
              <span style={{ fontWeight: 'bold' }}>产品名称</span>
            </td>
            <td style={{ height: '45px', width: '20%' }}>
              <span style={{ fontWeight: 'bold' }}>订阅周期</span>
            </td>
            <td style={{ height: '45px', width: '20%' }}>
              <span style={{ fontWeight: 'bold' }}>订阅数量</span>
            </td>
            <td style={{ height: '45px', width: '20%' }}>
              <span style={{ fontWeight: 'bold' }}>备注</span>
            </td>
          </tr>
          {orderDetailVos.map((item, index) => (
            <tr>
              <td style={{ height: '45px' }}>{item.productName}</td>
              <td style={{ height: '45px' }}>{item.resPeriodNum}</td>
              <td style={{ height: '45px' }}>{item.productBuyNumber}</td>
              <td style={{ height: '45px' }}>{item.promotionFormateName}</td>
            </tr>
          ))}
        </table>
        <div className={printStyles.textStyle}>
          <div>服务说明：</div>
          <p style={{ textIndent: '2em' }}>
            订购图书商城的客户，收到首次快递7天内（以快递签收记录为准），商品在不影响二次销售的情况下，联系客服申请退换货(赠品也需一起寄回哦)。如非质量问题的退换货，运费需买家自理哦。
            感谢您对图书商城的支持，如有快递查件等问题，请及时联系客服人员。
          </p>
        </div>
        <div className={printStyles.textStyle}>
          <div>1、贴心在线客服服务</div>
          <div>2、免费领取线上资源</div>
          <div>3、查寻每期快递信息</div>
          <div>4、贴心在线客服服务</div>
          <div>5、最新优惠活动资讯</div>
        </div>
      </div>
    );
  }
}
